<template>
<div class="declarationFormVue">

  <h2>中华人民共和国海关出口货物报关单</h2>

  <div class="head">

    <div class="btns clearfix">
      <!-- <el-button class="export" :disabled="!editable" type="primary">导出</el-button> -->
    </div>



    <div class="tcf-table">
      <div class="tcf-table-in">
        <el-row>
          <el-col :span="6">
            <p>预录入编号：</p>
          </el-col>
          <el-col :span="6">
            <el-input :readonly="!editable" v-model="data.documentprocess_cc_df_enterNO" placeholder="请输入内容"></el-input>
          </el-col>
          <el-col :span="6">
            <p>海关编号：</p>
          </el-col>
          <el-col :span="6">
            <el-input :readonly="!editable" v-model="data.documentprocess_cc_df_hscode" placeholder="请输入内容"></el-input>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="2">
            <p>收发货人</p>
          </el-col>
          <el-col :span="7">
            <p>12109607NK  天津金贸链进出口有限公司</p>
          </el-col>
          <el-col :span="2">
            <p>出口口岸</p>
          </el-col>
          <el-col :span="3">
            <el-input :readonly="!editable" v-model="data.documentprocess_cc_df_exportPort" placeholder="请输入内容"></el-input>
          </el-col>
          <el-col :span="2">
            <p>出口日期</p>
          </el-col>
          <el-col :span="3">
            <el-date-picker  value-format="yyyy-MM-dd" :disabled="!editable"  @change="mustUpdate2"   type="date" v-model="documentprocess_cc_df_exportDate" ></el-date-picker>
          </el-col>
          <el-col :span="2">
            <p>申报日期</p>
          </el-col>
          <el-col :span="3">
            <el-date-picker  value-format="yyyy-MM-dd" :disabled="!editable"  @change="mustUpdate2"   type="date" v-model="documentprocess_cc_df_applyDate"></el-date-picker>
          </el-col>
        </el-row>

        <!--  -->
        <el-row>
          <el-col :span="9">
            <p>生产销售单位</p>
          </el-col>
          <el-col :span="2">
            <p>运输方式</p>
          </el-col>
          <el-col :span="5">
            <p>运输工具名称</p>
          </el-col>
          <el-col :span="8">
            <p>提运单号</p>
          </el-col>
        </el-row>
        <!--  -->

        <el-row>
          <el-col :span="9">
            <el-input :readonly="!editable" v-model="data.documentprocess_cc_df_company" placeholder="请输入内容"></el-input>
          </el-col>
          <el-col :span="2">
            <el-input :readonly="!editable" v-model="data.documentprocess_cc_df_transport" placeholder="请输入内容"></el-input>
          </el-col>
          <el-col :span="5">
            <el-input :readonly="!editable" v-model="data.documentprocess_cc_df_transportTool" placeholder="请输入内容"></el-input>
          </el-col>
          <el-col :span="8">
            <el-input :readonly="!editable" v-model="data.documentprocess_cc_df_delNO" placeholder="请输入内容"></el-input>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <p>申报单位</p>
          </el-col>
          <el-col :span="6">
            <p>贸易方式</p>
          </el-col>
          <el-col :span="6">
            <p>征免性质</p>
          </el-col>
          <el-col :span="6">
            <p>备案号</p>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <p>12109607NK天津金贸链进出口有限公司</p>
          </el-col>
          <el-col :span="6">
            <p>一般贸易 0110</p>
          </el-col>
          <el-col :span="6">
            <p>一般征税</p>
          </el-col>
          <el-col :span="6">
            <el-input :readonly="!editable" v-model="data.documentprocess_cc_df_recordNO" placeholder="请输入内容"></el-input>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <p>贸易国（地区）</p>
          </el-col>
          <el-col :span="6">
            <p>运抵国（地区）</p>
          </el-col>
          <el-col :span="6">
            <p>指运港</p>
          </el-col>
          <el-col :span="6">
            <p>境内货源地</p>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-input :readonly="!editable" v-model="data.documentprocess_cc_df_tradeCountry" placeholder="请输入内容"></el-input>
          </el-col>
          <el-col :span="6">
            <el-input :readonly="!editable" v-model="data.documentprocess_cc_df_destCountry" placeholder="请输入内容"></el-input>
          </el-col>
          <el-col :span="6">
            <el-input :readonly="!editable" v-model="data.documentprocess_cc_df_specPort" placeholder="请输入内容"></el-input>
          </el-col>
          <el-col :span="6">
            <el-input :readonly="!editable" v-model="data.documentprocess_cc_df_yardGoods" placeholder="请输入内容"></el-input>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="5">
            <p>许可证号</p>
          </el-col>
          <el-col :span="5">
            <p>成交方式</p>
          </el-col>
          <el-col :span="5">
            <p>运费</p>
          </el-col>
          <el-col :span="5">
            <p>保费</p>
          </el-col>
          <el-col :span="4">
            <p>杂费</p>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="5">
            <el-input :readonly="!editable" v-model="data.documentprocess_cc_df_license" placeholder="请输入内容"></el-input>
          </el-col>
          <el-col :span="5">
            <el-input :readonly="!editable" v-model="data.documentprocess_cc_df_tradeTerms" placeholder="请输入内容"></el-input>
          </el-col>
          <el-col :span="5">
            <el-input :readonly="!editable" v-model="data.documentprocess_cc_df_freight" placeholder="请输入内容"></el-input>
          </el-col>
          <el-col :span="5">
            <el-input :readonly="!editable" v-model="data.documentprocess_cc_df_premium" placeholder="请输入内容"></el-input>
          </el-col>
          <el-col :span="4">
            <el-input :readonly="!editable" v-model="data.documentprocess_cc_df_otherCharge" placeholder="请输入内容"></el-input>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="5">
            <p>合同协议号</p>
          </el-col>
          <el-col :span="5">
            <p>件数</p>
          </el-col>
          <el-col :span="5">
            <p>包装种类</p>
          </el-col>
          <el-col :span="5">
            <p>毛重(公斤)</p>
          </el-col>
          <el-col :span="4">
            <p>净重(公斤)</p>
          </el-col>
        </el-row>
        <el-row class="center-input">
          <el-col :span="5">
            <el-input :readonly="!editable" v-model="data.documentprocess_cc_df_contractNO" placeholder="请输入内容"></el-input>
          </el-col>
          <el-col :span="5">
            <el-input :readonly="!editable" v-model="data.documentprocess_cc_df_numbers" placeholder="请输入内容"></el-input>
          </el-col>
          <el-col :span="5">
            <el-input :readonly="!editable" v-model="data.documentprocess_cc_df_cartons" placeholder="请输入内容"></el-input>
          </el-col>
          <el-col :span="5">
            <el-input :readonly="!editable" v-model="data.documentprocess_cc_df_grossWeight" placeholder="请输入内容"></el-input>
          </el-col>
          <el-col :span="4">
            <el-input :readonly="!editable" v-model="data.documentprocess_cc_df_netWeight" placeholder="请输入内容"></el-input>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <p>集装箱号</p>
          </el-col>
          <el-col :span="8">
            <p>随附单据</p>
          </el-col>
          <el-col :span="8">
            <p>生产厂家</p>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-input :readonly="!editable" v-model="data.documentprocess_cc_df_containerNO" placeholder="请输入内容"></el-input>
          </el-col>
          <el-col :span="8">
            <el-input :readonly="!editable" v-model="data.documentprocess_cc_df_attachBills" placeholder="请输入内容"></el-input>
          </el-col>
          <el-col :span="8">
            <el-input :readonly="!editable" v-model="data.documentprocess_cc_df_manufacturer" placeholder="请输入内容"></el-input>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-input :readonly="!editable" v-model="data.documentprocess_cc_df_marks" placeholder="请输入内容"></el-input>
          </el-col>
        </el-row>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column type="index" label="项号" :index="indexMethod"></el-table-column>
          <el-table-column prop="documentprocess_cc_df_productNO" label="商品编号">
            <template slot-scope="scope">
                        <el-input :readonly="!editable" v-model="scope.row.documentprocess_cc_df_productNO" placeholder="商品编号"></el-input>
                    </template>
          </el-table-column>
          <el-table-column prop="documentprocess_cc_df_productName" label="商品名称">
            <template slot-scope="scope">
                       <el-input :readonly="!editable" v-model="scope.row.documentprocess_cc_df_productName" placeholder="商品名称"></el-input>
            </template>
          </el-table-column>

          <el-table-column prop="documentprocess_cc_df_productDesc" label="规格型号">
            <template slot-scope="scope">
                       <el-input :readonly="!editable" v-model="scope.row.documentprocess_cc_df_productDesc" placeholder="商品规格"></el-input>
            </template>
          </el-table-column>

           <el-table-column prop="documentprocess_cc_df_quantityAndUnit" label="数量及单位">
               <template slot-scope="scope">
                      <div class="has-unit">
                        <el-row>
                          <el-col :span="16">
                            <el-input-number :min="0"  :controls="false" :disabled="!editable" @change="handleTableNumberChange"  v-model="scope.row.documentprocess_cc_df_quantityAndUnit[0]" ></el-input-number>
                          </el-col>
                          <el-col :span="8">
                            <el-input :readonly="!editable" v-model="scope.row.documentprocess_cc_df_quantityAndUnit[1]"></el-input>
                          </el-col>
                        </el-row>
                      </div>
                    </template>
          </el-table-column>


          <el-table-column prop="documentprocess_cc_df_weightAndUnit" label="净重及单位">
               <template slot-scope="scope">
                      <div class="has-unit">
                        <el-row>
                          <el-col :span="12">
                            <el-input-number :min="0"  :controls="false" :disabled="!editable" @change="handleTableNumberChange"  v-model="scope.row.documentprocess_cc_df_weightAndUnit[0]" ></el-input-number>
                          </el-col>
                          <el-col :span="12">
                            <el-input :readonly="!editable" v-model="scope.row.documentprocess_cc_df_weightAndUnit[1]"></el-input>
                          </el-col>
                        </el-row>
                      </div>
                    </template>
          </el-table-column>


          <el-table-column prop="documentprocess_cc_df_destnationContry" label="最终目的国（地区）">
            <template slot-scope="scope">
                        <el-input :readonly="!editable" v-model="scope.row.documentprocess_cc_df_destnationContry" placeholder="请输入内容"></el-input>
                    </template>
          </el-table-column>
          <el-table-column prop="documentprocess_cc_df_price" label="单价">
            <template slot-scope="scope">
                        <el-input-number :min="0"  :controls="false" :disabled="!editable" @change="handleTableNumberChange"  v-model="scope.row.documentprocess_cc_df_price" ></el-input-number>
                        <!-- <input  type="number" :min="0"  :disabled="!editable" @input="handleTableNumberChange"  v-model="scope.row.documentprocess_cc_df_price" /> -->
                    </template>
          </el-table-column>
          <el-table-column prop="documentprocess_cc_df_amount" label="总价">
            <template slot-scope="scope">
                        <input type="number"  :min="0" :disabled="!editable"   v-model="scope.row.documentprocess_cc_df_amount" />
                       <!-- <el-input-number :min="0"  :controls="false" :disabled="!editable" @change="handleTableNumberChange"  v-model="scope.row.documentprocess_cc_df_amount" ></el-input-number> -->
                    </template>
          </el-table-column>
          <el-table-column prop="documentprocess_cc_df_currency" label="币制">
            <template slot-scope="scope">
                        <el-select   @change="mustUpdate"  :disabled="!editable" v-model="scope.row.documentprocess_cc_df_currency" placeholder="请选择">
                            <el-option
                              label="人民币"
                              value="人民币">
                            </el-option>
                            <el-option
                              label="美元"
                              value="美元">
                            </el-option>
                            <el-option
                              label="加元"
                              value="加元">
                            </el-option>
                            <el-option
                              label="欧元"
                              value="欧元">
                            </el-option>
                        </el-select>
                    </template>
          </el-table-column>
          <el-table-column prop="documentprocess_cc_df_LevyExemption" label="征免">
            <template slot-scope="scope">
                        <el-input :readonly="!editable" v-model="scope.row.documentprocess_cc_df_LevyExemption" placeholder="请输入内容"></el-input>
                    </template>
          </el-table-column>

          <el-table-column
          v-if="editable"
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button @click="addNewLine(scope.$index, data.documentprocess_cc_df_table)" type="text" size="small">添加</el-button>
            <el-button @click="removeCurrentLine(scope.$index, data.documentprocess_cc_df_table)" type="text" size="small">移除</el-button>
          </template>
        </el-table-column>
        </el-table>



      </div>

    </div>

    <div class="upload">
      <p class="upload-hint">票据/附件</p>
      <div>
        <div class="upload-btn">
          <input type="file"  v-show="editable"  name="file" multiple @change="selectFiles" >
          <el-button :disabled="!editable" type="primary">选择附件</el-button>
        </div>

        <ul class="upload-files">
          <li @mouseover="handleOver(item)"   @mouseout="handleOut(item)" v-for="(item,index) in data.attachedFiles" :key="index">
            <span @click="download(item.id, $event)">{{item.name}}</span>
            <span v-if="editable && item.status" class="el-icon-circle-check" style="color:#67c23a;"></span>
            <span v-else-if="editable" class="el-icon-circle-close" @click="changeFiles(index,item)" style="color:red;"></span>
          </li>
        </ul>
      </div>
    </div>

  </div>


</div>
</template>

<script>
import {uploadFiles} from '@/server/initiatingprocess';
import {filedownload , deleteFile} from '@/server/customermanagement/index.js'
import {toFixed} from '@/util/transform.js';

export default {
  created() {
    this.documentprocess_cc_df_exportDate = this.data.documentprocess_cc_df_exportDate;
    this.documentprocess_cc_df_applyDate = this.data.documentprocess_cc_df_applyDate;
  },

  mounted(){
    //关联外贸合同
    let _this = this;
    this.bus.$on('bind-new-ftc', function (ftcData) {
      _this.data.documentprocess_cc_df_contractNO = ftcData.bf_orderNumber;
      _this.$forceUpdate();
    });

  },
  updated() {

    if (this.clickTimes === 1 && this.relation ) {


      let flag = this.data.modifyTime ? true : false;

      let innerFlag = this.data.documentprocess_cc_df_table.findIndex(item => {
        return  item.modifyTime != null;
      }) == -1 ? false : true;

      flag  = flag || innerFlag;
      

      if (!flag){

        //第一次关联报关箱单

        this.data.documentprocess_cc_df_numbers = this.relatedData1.documentprocess_cc_cdb_totalCartons;
        this.data.documentprocess_cc_df_cartons = this.relatedData1.documentprocess_cc_cdb_totalCartonsUnit;
        this.data.documentprocess_cc_df_grossWeight = this.relatedData1.documentprocess_cc_cdb_totalGrossWeight;
        this.data.documentprocess_cc_df_netWeight = this.relatedData1.documentprocess_cc_cdb_totalNetWeight;


        //第一次关联报关发票
        this.data.documentprocess_cc_df_transport = this.relatedData2.documentprocess_cc_cdi_transport;
        this.data.documentprocess_cc_df_tradeTerms = this.relatedData2.documentprocess_cc_cdi_tradeTerms;


        // for (let i = 0; i < this.data.documentprocess_cc_df_table.length; i++) {
        for (let i = 0; i < this.relatedData1.documentprocess_cc_cdb_table.length; i++) {
          if (!this.data.documentprocess_cc_df_table[i]){
            this.data.documentprocess_cc_df_table.push({});
          }

          let currentLine = this.data.documentprocess_cc_df_table[i];
          let box = this.relatedData1.documentprocess_cc_cdb_table[i];
          let invoice = this.relatedData2.documentprocess_cc_cdi_table[i];

          currentLine.documentprocess_cc_df_quantityAndUnit = [];
          currentLine.documentprocess_cc_df_weightAndUnit = [];

          currentLine.documentprocess_cc_df_productName = box.documentprocess_cc_cdb_products;
          currentLine.documentprocess_cc_df_productDesc = box.documentprocess_cc_cdb_description;

          (currentLine.documentprocess_cc_df_quantityAndUnit)[0] = parseInt(box.documentprocess_cc_cdb_quantity);
          (currentLine.documentprocess_cc_df_quantityAndUnit)[1] = '个';

          (currentLine.documentprocess_cc_df_weightAndUnit)[0] = toFixed(box.documentprocess_cc_cdb_netWeight, 2);
          (currentLine.documentprocess_cc_df_weightAndUnit)[1] = 'KGS';

          currentLine.documentprocess_cc_df_destnationContry = this.data.documentprocess_cc_df_tradeCountry;

          currentLine.documentprocess_cc_df_price = toFixed(invoice.documentprocess_cc_cdi_price, 2);
          currentLine.documentprocess_cc_df_amount = toFixed(invoice.documentprocess_cc_cdi_lineAmount, 2);

          currentLine.documentprocess_cc_df_LevyExemption = '照章';

          this.$forceUpdate();

        }
     }

      this.clickTimes = 2;
    }
    this.updateTable();
  },
  methods: {
    indexMethod(value) {
      return value + 1;
    },

    mustUpdate(){
      this.$forceUpdate();
    },
    mustUpdate2(){
      this.data.documentprocess_cc_df_applyDate = this.documentprocess_cc_df_applyDate;
      this.data.documentprocess_cc_df_exportDate = this.documentprocess_cc_df_exportDate;
      this.$forceUpdate();
    },
    specialInitialProcess() {
      let dom = document.querySelector('.initiatingprocess .routers-ctrl');
      if (dom) {
        dom.style.zIndex = '0';
      }
    },
    selectFiles(event){
      //票据附件
      let _this = this;


      //直接上传，并且获得后端返回的文件的url,将url保存到 this.data.attachedFiles中
      uploadFiles(event.target.files).then((resArr)=>{
        resArr.forEach(function(res,i){
          _this.data.attachedFiles.push({name: event.target.files[i].name, status: 1, id: res.data.datas[0].id});
        });

        _this.$forceUpdate();
      });
    },
    changeFiles(index,item) {
      deleteFile({'id':item.id}).then((res) => {
        if(res.code != 1 ){
          this.$message.error('删除失败，请检查网络后重试');
        } else {
          this.data.attachedFiles.splice(index, 1);
        }
      });
    },
    handleOver(item){
      item.status = 0;
      this.$forceUpdate();
    },
    handleOut(item){
      item.status = 1;
      this.$forceUpdate();
    },
    download(id, event){
      window.open('http://47.104.93.41/api/common/download?id='+id);
    },

    handleTableNumberChange(){
      this.updateTable();
      this.$forceUpdate();
    },

    addNewLine(currentIndex, table){
      let newLine = _.cloneDeep(table[currentIndex]);
      _.unset(newLine, 'id');
      _.unset(newLine, 'createTime');
      _.unset(newLine, 'dfId');
      _.unset(newLine, 'formInstId');
      _.unset(newLine, 'modifyTime');


      newLine.documentprocess_cc_df_quantityAndUnit = ['0','个'];
      newLine.documentprocess_cc_df_weightAndUnit = ['0', 'KGS'];

      table.splice(currentIndex + 1, 0, newLine);
    },
    removeCurrentLine(currentIndex, table){
      if (table.length > 1){
        table.splice(currentIndex, 1);
      }
    },

    updateTable(){
      let current = this.data.documentprocess_cc_df_table;

      for (var i = 0; i < current.length; i++) {

        current[i].documentprocess_cc_df_quantityAndUnit =  current[i].documentprocess_cc_df_quantityAndUnit || [0, '个'];
        current[i].documentprocess_cc_df_weightAndUnit = current[i].documentprocess_cc_df_weightAndUnit || [0, 'KGS'];

        current[i].documentprocess_cc_df_price = toFixed(current[i].documentprocess_cc_df_price, 2);
        current[i].documentprocess_cc_df_amount = toFixed((current[i].documentprocess_cc_df_quantityAndUnit)[0] * current[i].documentprocess_cc_df_price, 2);
      }
    }
  },
  computed: {
    tableData(){
      let current = this.data.documentprocess_cc_df_table;

      for (var i = 0; i < current.length; i++) {

        current[i].documentprocess_cc_df_quantityAndUnit =  current[i].documentprocess_cc_df_quantityAndUnit || [0, '个'];
        current[i].documentprocess_cc_df_weightAndUnit = current[i].documentprocess_cc_df_weightAndUnit || [0, 'KGS'];

        current[i].documentprocess_cc_df_price = toFixed(current[i].documentprocess_cc_df_price, 2);

        current[i].documentprocess_cc_df_amount = toFixed((current[i].documentprocess_cc_df_quantityAndUnit)[0] * current[i].documentprocess_cc_df_price, 2);
      }

      return current;
    }
  },
  data() {
    return {
      clickTimes: 0,
      documentprocess_cc_df_exportDate: '',
      documentprocess_cc_df_applyDate: '',
    }
  },
  props: {
    data: {
      type: Object,
      required: true
    },
    relatedData1: {
      type: Object,
      required: true
    },
    relatedData2: {
      type: Object,
      required: true
    },
    relation: {
      type: Boolean,
      required: true
    },
    editable: {
      type: Boolean,
      requried: true
    },
    bus: {
      type: Object,
      required: true
    }
  },
  components: {}
}
</script>

<style lang="scss" >
.declarationFormVue {

    padding: 20px;

    font-size: 14px;

    border: 1px solid #999;
    > h2 {
        text-align: center;
    }

    a {
        color: #409EFF;
    }
    .el-table {
        margin-bottom: 20px;
    }

    .center-input {
      input {
        text-align: center !important;
      }
    }

    .head {
        .btns {
            width: 100%;
            height: 40px;
            text-align: center;
            .export {
                float: right;
            }
        }

        .tcf-table {
            margin-top: 20px;
            padding: 20px;
            box-sizing: border-box;

            input {
              border: none;
              outline: none;
              background-color: transparent;
              height: 100%;
             }

            .cell {
              padding: 0px;
            }

            .has-unit {
              .el-row {
                border: none !important;
              }
              .el-col {
                border: none !important;
              }

              .el-input-number {
                width: 100% !important;
                min-width:auto !important;
              }

            }

            td {
              border: 1px solid #e6ebf5;
            }

            .el-input__inner {
              padding: 0;
              border: none;
              background: transparent;
            }

            .el-input__decrease,
            .el-input__increase {
                width: 20px;

                border: none;
                background: transparent;
            }

            .el-input-number {
              width: 100px !important;
              min-width: 100px;
            }

            .el-input {
                width: 100%;
            }

            h2 {
                text-align: center;
                padding: 10px 0;
            }
            .-null {
                height: 40px;
            }
            .tcf-table-title {
                text-align: center;
            }
            .tcf-table-in {
                border-top: 1px solid #999;
                .el-row {
                    box-sizing: border-box;
                    border-bottom: 1px solid #999;
                    border-left: 1px solid #999;
                }
                .el-col {
                    text-align: center;
                    line-height: 40px;
                    box-sizing: border-box;
                    border-right: 1px solid #999;
                    padding: 5px;
                }
            }
            .el-table {
                margin-top: 10px;
            }
            .el-select {
                width: 100%;
            }
            .-el-col {
                padding: 0 !important;
            }
            .bill-of-lading-project-requires-p {
                height: 392px;
            }
            .special-provisions {
                height: 351px;
            }
            .bill-of-lading-project-requires {
                width: 100%;
                border-bottom: 1px solid #999;
                box-sizing: border-box;
                .el-row {
                    box-sizing: border-box;
                    border: none;
                }
                .el-col {
                    text-align: center;
                    line-height: 40px;
                    box-sizing: border-box;
                    border: none;
                }
                .el-col-20 {
                    text-align: left;
                    text-indent: 20px;
                }
                .-el-col {
                    padding: 5px !important;
                    text-indent: 0;
                }
            }
            .-bill-of-lading-project-requires {
                border-bottom: none;
            }
            .sea-freight {
                .el-col {
                    text-align: center;
                    height: 90px;
                    line-height: 90px;
                    box-sizing: border-box;
                }
                .sea-freight-col {
                    line-height: 41px;
                    padding-top: 3px;
                }
            }
            .no-border {
                //   border: none !important;
            }

            .special-row {
                .el-col {
                    height: 25px;
                    line-height: 25px;
                }
            }

        }

        .upload {
          >div {
            border: 1px solid #999;
            padding: 20px 0px 40px 20px;
          }

          .upload-btn {
            position: relative;
            >input {
              opacity: 0;
              width: 100px;
              height: 40px;
              position: absolute;
              top: 0;
              left: 0;
            }
          }

          .upload-files {

              > li {
                  width: 300px;
                  padding: 10px 0;
                  transition: all 0.5s linear;

                  &:hover {

                    >span {
                      color: #409EFF;
                    }
                  }
                }

              font-size: 16px;
              span {
                  padding: 0 10px;
                  cursor: pointer;
                  display: inline;
              }
              span.el-icon-close:hover {
                  cursor: pointer;
              }
          }
          .upload-hint {
            font-size: 20px;
            margin-bottom: 10px;
          }
        }

    }






}
</style>
